<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/icon.css">
  <link rel="stylesheet" href="css/tablele.css">

</head>

<body>
  <div class="mid">
    <div class="left">
      <button class="btnDelAll"><span class="iconfont icon-shanchu"></span>删除选中</button>
      <button class="btnAdd"><span class="iconfont icon-add"></span>添加</button>
    </div>
    <div class="dataNum">
      共有数据：<span class="shujunum"></span>条
    </div>
  </div>
  <div>
    <table border="0" cellpadding="0" cellspacing="0" class="tab">
      <thead>
        <tr>
          <th><input type="checkbox" class="quanxuan"></th>
          <th>账号</th>
          <th>职位名称</th>
          <th>职位描述</th>
          <th>员工管理</th>
          <th>部门管理</th>
          <th>学校活动</th>
          <th>学校管理</th>
          <th>学生管理</th>
          <th>班级管理</th>
          <th>地区统计</th>
          <th>学校统计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody class="qxtbody"></tbody>
    </table>
  </div>
  <!-- 遮罩层 -->
  <div class="mask"></div>
  <!-- 不能为空的弹框 -->
  <div class="cantkong">
    <h6>不能为空</h6>
    <button class="kongqd">确定</button>
  </div>
  <!-- 提示删除的弹框 -->
  <div class="qdshan">
    <h5>确定删除所选项吗</h5>
    <button class="qdshanok">确定</button>
    <button class="qdshanno">取消</button>
  </div>
  <!-- 提示选择删除项的确定的弹框 -->
  <div class="tsweisel">
    <h5>请选择删除项</h5>
    <button class="selshan">确定</button>
  </div>
  <!-- 提示添加项修改项不能为空的弹框 -->
  <div class="tsaddxgkong">
    <h5>职位名称或描述不能为空</h5>
    <button class="tsaddqd">确定</button>
  </div>
  <!-- 添加修改的弹框 -->
  <div class="addkuang">
    <h3>添加修改新职位</h3>
    <div class="addzwname">职位名称：<input type="text"></div>
    <div class="addzwms"><span>职位描述：</span><textarea></textarea></div>
    <div class="addqx">
      <input type="checkbox" id="addyggl"><label for="addyggl">员工管理权限</label>
      <input type="checkbox" id="addbmgl"><label for="addbmgl">部门管理权限</label>
      <input type="checkbox" id="addxxhd"><label for="addxxhd">学校活动权限</label>
      <input type="checkbox" id="addxxgl"><label for="addxxgl">学校管理权限</label>
      <input type="checkbox" id="addxsgl"><label for="addxsgl">学生管理权限</label>
      <input type="checkbox" id="addbjgl"><label for="addbjgl">班级管理权限</label>
      <input type="checkbox" id="addtqtj"><label for="addtqtj">地区统计权限</label>
      <input type="checkbox" id="addxxtj"><label for="addxxtj">学校统计权限</label>
    </div>
    <div class="addbtn">
      <button class="addqdbtn">确定</button>
      <button class="addqxbtn">取消</button>
    </div>
  </div>
  <!-- 确认删除的弹框 -->
  <div class="danshan">
    <h5>确认删除吗？</h5>
    <button class="danshanqd">确定</button>
    <button class="danshanqx">取消</button>
  </div>
  <!-- 分页 -->
  <div class="fenyepage de_pageBt"></div>
  <script src="js/data.js"></script>
  <script src="js/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      var current = 1; //当前的页数
      var xianshishu = 4; //每页显示的数据条数
      var addorbianji = -1; //判断是添加还是编辑
      xianshishuju(); //显示数据
      dangeclick(); //单个点击
      quanxuan(); //全选
      danxuan(); //单选
      piliangshanchu(); //批量删除
      addjia(); //添加
      bianji(); //编辑

      dangeshan(); //单个删除
      shengchengfenye(); //生成分页
      pageclick(); //页数点击


      //显示数据
      function xianshishuju() {
        $(".quanxuan")[0].checked = false;
        $(".qxtbody").html("");
        if (sessionStorage.getItem("zhiweiArr")) {
          var arr = sessionStorage.getItem("zhiweiArr");
          zhiweiArr = JSON.parse(arr);
        }
        var start = (current - 1) * xianshishu;
        var end = start + xianshishu;
        for (var index = start; index < end && index < zhiweiArr.length; index++) {
          $(".qxtbody").append(`
          <tr>
          <td data="${index}"><input type="checkbox" class="danxuan"></td>
          <td>${zhiweiArr[index].account}</td>
          <td data="${index}" class="zyname"><span class="tt" ty="zhiyename">${zhiweiArr[index].zhiyename}</span><span class="iconfont zwname">&#xf014f;</span></td>
          <td data="${index}" class="zyms"><span class="tt" ty="zhiyeMiaosu">${zhiweiArr[index].zhiyeMiaosu}</span><span class="iconfont zwms">&#xf014f;</span></td>
          <td data="${index}" class="yggl"><span class="tt" ty="isygguanli">${zhiweiArr[index].isygguanli}</span><span class="iconfont se">&#xf014f;</span></td>
          <td data="${index}" class="bmgl"><span class="tt" ty="isbmguanli">${zhiweiArr[index].isbmguanli}</span><span class="iconfont se">&#xf014f;</span></td>
          <td data="${index}" class="xxhd"><span class="tt" ty="isManagActives">${zhiweiArr[index].isManagActives}</span><span class="iconfont se">&#xf014f;</span></td>
          <td data="${index}" class="xxgl"><span class="tt" ty="isManagSchool">${zhiweiArr[index].isManagSchool}</span><span class="iconfont se">&#xf014f;</span></td>
          <td data="${index}" class="xsgl"><span class="tt" ty="isManagStu">${zhiweiArr[index].isManagStu}</span></span><span class="iconfont se">&#xf014f;</span></td>
          <td data="${index}" class="bjgl"><span class="tt" ty="isManagClass">${zhiweiArr[index].isManagClass}</span><span class="iconfont se">&#xf014f;</span></td>
          <td data="${index}" class="dqtj"><span class="tt" ty="isDiquTj">${zhiweiArr[index].isDiquTj}</span><span class="iconfont se">&#xf014f;</span></td>
          <td data="${index}" class="xxtj"><span class="tt" ty="isschoolTj">${zhiweiArr[index].isschoolTj}</span><span class="iconfont se">&#xf014f;</span></td>
          <td><button data="${index}" class="btnbianji">修改</button><button data="${index}" class="btnshan">删除</button></td>
          </tr>
          `);
        }
        $(".tt").each(function () {
          if ($(this).text() == "true") {
            $(this).text("是");
          }
          if ($(this).text() == "false") {
            $(this).text("否");
          }
        })
        //显示数据条数
        $(".shujunum").html(zhiweiArr.length);
      }

      //显示编辑符号
      $(".qxtbody").on("mouseenter", "td", function () {
        $(this).find(".iconfont").show();
      })
      $(".qxtbody").on("mouseleave", "td", function () {
        $(this).find(".iconfont").hide();
      })

      //单个编辑点击
      function dangeclick() {
        $(".qxtbody").on("click", ".se", function () {
          $(this).hide();
          $(this).prev().html(`
          <select class="xzval" name="zhi">
          <option >请选择</option>
          <option value="true">是</option>
          <option value="false">否</option>
        </select>`);
          $(".xzval").change(function () {
            var val = $(".xzval").val();
            var data = $(this).parent().parent().attr("data");
            var tyval = $(this).parent().attr("ty");
            if (sessionStorage.getItem("zhiweiArr")) {
              var arr = sessionStorage.getItem("zhiweiArr");
              zhiweiArr = JSON.parse(arr);
            }
            zhiweiArr[data][tyval] = val;
            var str = JSON.stringify(zhiweiArr);
            sessionStorage.setItem("zhiweiArr", str);
            if (val == "true") {
              val = "是";
            }
            if (val == "false") {
              val = "否";
            }
            $(this).parent().html(val);
          })
        })
        //职位名称的改变
        $(".qxtbody").on("click", ".zwname", function () {
          $(this).hide();
          var ylval = $(this).prev().text();
          $(this).hide();
          $(this).prev().html(`
          <textarea class="zwnametxt">${ylval}</textarea>
         `);
          $(".zwnametxt").select();
          $(".zwnametxt").keydown(function (e) {
            if (e.keyCode == 13) {
              $(".zwnametxt").blur();
            }
          });
          $(".zwnametxt").blur(function () {
            var xzval = $(this).val();
            if (xzval == "") {
              $(".mask").show();
              $(".cantkong").show();
              $(".cantkong").animate({
                "top": "200px"
              }, 300)
            } else {
              var data = $(this).parent().parent().attr("data");
              var tyval = $(this).parent().attr("ty");
              if (sessionStorage.getItem("zhiweiArr")) {
                var arr = sessionStorage.getItem("zhiweiArr");
                zhiweiArr = JSON.parse(arr);
              }
              zhiweiArr[data][tyval] = xzval;
              var str = JSON.stringify(zhiweiArr);
              sessionStorage.setItem("zhiweiArr", str);
              $(this).parent().html(xzval);
            }
          })
        })

        //职位描述的改变
        $(".qxtbody").on("click", ".zwms", function () {
          $(this).hide();
          var ylval = $(this).prev().text();
          $(this).hide();
          $(this).prev().html(`
          <textarea class="zwmstxt">${ylval}</textarea>
         `);
          $(".zwmstxt").select();
          $(".zwmstxt").keydown(function (e) {
            if (e.keyCode == 13) {
              $(".zwmstxt").blur();
            }
          });
          $(".zwmstxt").blur(function () {
            var xzval = $(this).val();
            if (xzval == "") {
              $(".mask").show();
              $(".cantkong").show();
              $(".cantkong").animate({
                "top": "200px"
              }, 300)
            } else {
              var data = $(this).parent().parent().attr("data");
              var tyval = $(this).parent().attr("ty");
              if (sessionStorage.getItem("zhiweiArr")) {
                var arr = sessionStorage.getItem("zhiweiArr");
                zhiweiArr = JSON.parse(arr);
              }
              zhiweiArr[data][tyval] = xzval;
              var str = JSON.stringify(zhiweiArr);
              sessionStorage.setItem("zhiweiArr", str);
              $(this).parent().html(xzval);
            }
          })
        })
        //为空的确定
        $(".kongqd").click(function () {
          $(".mask").hide();
          $(".cantkong").hide();
          $(".cantkong").css("top", "100px");
        })
      }

      //添加
      function addjia() {
        //弹出添加框
        $(".btnAdd").click(function () {
          $(".mask").show();
          $(".addkuang").show();
          $(".addkuang").animate({
            "top": "180px"
          }, 300)
          addorbianji = -1;
        });
        //确定添加或修改
        $(".addqdbtn").click(function () {
          var zhiyename = $(".addzwname").find("input").val();
          var zhiyeMiaosu = $(".addzwms").find("textarea").val();
          var isygguanli = $("#addyggl")[0].checked == true ? "true" : false;
          var isbmguanli = $("#addbmgl")[0].checked == true ? "true" : false;
          var isManagActives = $("#addxxhd")[0].checked == true ? "true" : false;
          var isManagSchool = $("#addxxgl")[0].checked == true ? "true" : false;
          var isManagStu = $("#addxsgl")[0].checked == true ? "true" : false;
          var isManagClass = $("#addbjgl")[0].checked == true ? "true" : false;
          var isDiquTj = $("#addtqtj")[0].checked == true ? "true" : false;
          var isschoolTj = $("#addxxtj")[0].checked == true ? "true" : false;
          var obj = {
            account: getAccount(),
            psd: "123",
            zhiyename: zhiyename,
            zhiyeMiaosu: zhiyeMiaosu,
            isygguanli: isygguanli,
            isbmguanli: isbmguanli,
            isManagActives: isManagActives,
            isManagSchool: isManagSchool,
            isManagStu: isManagStu,
            isManagClass: isManagClass,
            isDiquTj: isDiquTj,
            isschoolTj: isschoolTj
          }
          if (zhiyename == "" || zhiyeMiaosu == "") {
            $(".tsaddxgkong").show();
            $(".tsaddxgkong").animate({
              "top": "200px"
            }, 300);
          } else {
            if (sessionStorage.getItem("zhiweiArr")) {
              var arr = sessionStorage.getItem("zhiweiArr");
              zhiweiArr = JSON.parse(arr);
            }
            if (addorbianji == -1) {
              zhiweiArr.push(obj);
              setEditInfo(`增加了${zhiweiArr[zhiweiArr.length-1].zhiyename}的职位`);
            } else {
              zhiweiArr.splice(addorbianji, 1, obj);
              setEditInfo(`修改了${zhiweiArr[addorbianji].zhiyename}的职位`);
            }
            var str = JSON.stringify(zhiweiArr);
            sessionStorage.setItem("zhiweiArr", str);
            shengchengfenye();
            xianshishuju();

            $(".addqx input").each(function (index, item) {
              item.checked = false;
            })
            $(".addzwname input").val("");
            $(".addzwms textarea").val("");
            $(".addkuang").hide();
            $(".addkuang").css("top", "0")
            $(".mask").hide();
          }

        })
        //名称描述不能为空
        $(".tsaddqd").click(function () {
          $(".tsaddxgkong").hide();
          $(".tsaddxgkong").css("top", "100px");
        })
        //取消添加
        $(".addqxbtn").click(function () {
          $(".addkuang").hide();
          $(".addkuang").css("top", "0")
          $(".mask").hide();
          $(".addzwname input").val("");
          $(".addzwms textarea").val("");
          $(".addqx input").each(function (index, item) {
            item.checked = false;
          })
        })
      }
      //全选
      function quanxuan() {
        $(".quanxuan").click(function () {
          var ischecked = this.checked;
          $(".danxuan").each(function (index, item) {
            item.checked = ischecked;
          })
        })
      }

      //单选
      function danxuan() {
        $(".tab").on("click", ".danxuan", function () {
          var flage = true;
          $(".danxuan").each(function (index, item) {
            if (!item.checked) {
              flage = false;
            }
          })
          if (flage) {
            $(".quanxuan")[0].checked = true;
          } else {
            $(".quanxuan")[0].checked = false;
          }
        })
      }

      //批量删除
      function piliangshanchu() {
        $(".btnDelAll").click(function () {
          var isok = false;
          $(".danxuan").each(function (index, item) {
            if (item.checked) {
              isok = true;
            }
          })
          if (isok) {
            $(".mask").show();
            $(".qdshan").show();
            $(".qdshan").animate({
              "top": "200px"
            }, 300);
          } else {
            $(".mask").show();
            $(".tsweisel").show();
            $(".tsweisel").animate({
              "top": "200px"
            }, 300)
          }
          // 取消删除
          $(".qdshanno").click(function () {
            $(".qdshan").hide();
            $(".mask").hide();
            $(".qdshan").css("top", "100px")
          })
          $(".qdshanok").click(function () {
            //确定删除
            if (sessionStorage.getItem("zhiweiArr")) {
              var arr = sessionStorage.getItem("zhiweiArr");
              zhiweiArr = JSON.parse(arr);
            }
            var shanidArr = [];
            $(".danxuan").each(function (index, item) {
              if (item.checked) {
                var index = $(this).parent().next().text();
                shanidArr.push(index);
              }
            });

            $.each(shanidArr, function (index, item) {
              var shanchu = item;
              $.each(zhiweiArr, function (index, item) {
                if (shanchu == zhiweiArr[index].account) {
                  setEditInfo(`删除了${zhiweiArr[index].zhiyename}的职位`);
                  zhiweiArr.splice(index, 1);
                  return false;
                }
              })
            })
            $(".qxtbody").html("");
            var str = JSON.stringify(zhiweiArr);
            sessionStorage.setItem("zhiweiArr", str);
            shengchengfenye();
            xianshishuju();
            $(".qdshan").hide();
            $(".mask").hide();
            $(".qdshan").css("top", "100px")
          })
          $(".selshan").click(function () {
            $(".mask").hide();
            $(".tsweisel").hide();
            $(".tsweisel").css("top", "50px");
          })
        })
      }


      //单个删除
      function dangeshan() {
        $(".qxtbody").on("click", ".btnshan", function () {
          var index = $(this).attr("data");
          $(".danshan").show();
          $(".mask").show();
          $(".danshan").animate({
            "top": "200px"
          }, 300)
          // 确认删除
          $(".danshanqd").click(function () {
            if (sessionStorage.getItem("zhiweiArr")) {
              var arr = sessionStorage.getItem("zhiweiArr");
              zhiweiArr = JSON.parse(arr);
            }
            setEditInfo(`删除了${zhiweiArr[index].zhiyename}的职位`);
            zhiweiArr.splice(index, 1);
            var str = JSON.stringify(zhiweiArr);
            sessionStorage.setItem("zhiweiArr", str);
            $(".danshan").hide();
            $(".mask").hide();
            $(".danshan").css("top", "100px")
            shengchengfenye();
            xianshishuju();
          })
          //取消删除
          $(".danshanqx").click(function () {
            $(".danshan").hide();
            $(".mask").hide();
            $(".danshan").css("top", "100px")
          })
        })
      }


      //编辑
      function bianji() {
        $(".qxtbody").on("click", ".btnbianji", function () {
          addorbianji = $(this).attr("data");
          $(".mask").show();
          $(".addkuang").show();
          $(".addkuang").animate({
            "top": "180px"
          }, 300)
          if (sessionStorage.getItem("zhiweiArr")) {
            var arr = sessionStorage.getItem("zhiweiArr");
            zhiweiArr = JSON.parse(arr);
          }
          $(".addzwname").find("input").val(zhiweiArr[addorbianji].zhiyename);
          $(".addzwms").find("textarea").val(zhiweiArr[addorbianji].zhiyeMiaosu);
          $("#addyggl")[0].checked = zhiweiArr[addorbianji].isygguanli == "true" ? true : false;
          $("#addbmgl")[0].checked = zhiweiArr[addorbianji].isbmguanli == "true" ? true : false;
          $("#addxxhd")[0].checked = zhiweiArr[addorbianji].isManagActives == "true" ? true : false;
          $("#addxxgl")[0].checked = zhiweiArr[addorbianji].isManagSchool == "true" ? true : false;
          $("#addxsgl")[0].checked = zhiweiArr[addorbianji].isManagStu == "true" ? true : false;
          $("#addbjgl")[0].checked = zhiweiArr[addorbianji].isManagClass == "true" ? true : false;
          $("#addtqtj")[0].checked = zhiweiArr[addorbianji].isDiquTj == "true" ? true : false;
          $("#addxxtj")[0].checked = zhiweiArr[addorbianji].isschoolTj == "true" ? true : false;
        })
      }

      //生成页数
      function shengchengfenye() {
        if (sessionStorage.getItem("zhiweiArr")) {
          var arr = sessionStorage.getItem("zhiweiArr");
          zhiweiArr = JSON.parse(arr);
        }
        $(".fenyepage").html("");
        var pageshu = Math.ceil(zhiweiArr.length / 4);
        if (current > pageshu) {
          current = pageshu;
        }
        for (var i = 0; i < pageshu; i++) {
          $(".fenyepage").append('<button class="fenye">' + (i + 1) + '</button>')

          // $(".fenyepage").append('<button class="fenye">' + (i + 1) + '</button>')
        }
        $(".fenye").each(function (index, item) {
          $(this).attr("index", index);
        })
      }

      //默认点击第一个按钮
      $(".fenyepage button:first").click();

      //页数点击
      function pageclick() {
        $(".fenyepage").on("click", ".fenye", function () {
          $(".de_pageBt button").each(function () {
            $(this).attr("class","");        //清空所有按钮的点击class属性
          });
          $(this).addClass("de_pageBtActive");
          // $(this).css("backgroundColor", "#43BFD7");
          // $(this).siblings().css("backgroundColor", "gray");
          current = Number($(this).attr("index")) + 1;
          xianshishuju();
        })
      }

      //记录编辑信息方法
      // content:编辑内容  例如：content=`修改了${数组名.name}`的信息;
      function setEditInfo(content) {
        var obj = getSessionData("newNotice");
        var newObj = new Object();
        newObj.editUser = $(".hz_who").text(); //获取用户的账号
        newObj.editContent = content;
        var lt = new Date().toLocaleDateString();
        var newT = lt.split("/");
        var newStr = "";
        for (var i = 0; i < newT.length; i++) {
          newStr += newT[i] + "-";
        }
        //设置编辑时间
        newObj.editTime = newStr.substr(0, newStr.length - 1);
        obj.push(newObj);
        setSessionData("newNotice", obj);
      }



      //得到浏览器中的数据     str:数组名
      function getSessionData(str) {
        if (sessionStorage.getItem(str)) { //浏览器中存在该数组

        } else { //不存在，初识化
          if (str == "newNotice") {
            sessionStorage.setItem(str, JSON.stringify(newNotice));
          }
        }
        var obj = JSON.parse(sessionStorage.getItem(str));
        return obj;
      }

      //将数据存储到浏览器      str:数组名  data:数组
      function setSessionData(str, data) {
        var newStr = JSON.stringify(data);
        sessionStorage.setItem(str, newStr);
      }
      //生成账号account
      function getAccount() {
        if (sessionStorage.getItem("zhiweiArr")) {
          var arr = sessionStorage.getItem("zhiweiArr");
          zhiweiArr = JSON.parse(arr);
        }
        var num = zhiweiArr[zhiweiArr.length - 1].account;
        num = Number(num);
        num = num + 1;
        if (num < 10) {
          num = "00" + num;
        } else if (num < 100) {
          num = "0" + num;
        }
        return num;
      }
    })
  </script>
</body>

</html>